<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		
		<!-- 用于数据的绑定,数据的读取

【需求】：使用vue赋值json数据，并显示到页面的输入框中（表单回显）. 点击按钮，改变json数据，验证同时输入框的内容也发生改变。 -->
			 
		<div id="app">
		    用户名:<input type="text" v-model="user.username"><br>
		    密码:<input type="text" v-model="user.password"><br>
		    <input type="button" @click="fun01" value="按钮">
		</div>
		​
		<script>
		    new Vue({
		        el: '#app',
		        data: {
		            user: {
		                username: 'zs',
		                password: '123456'
		            }
		        },
		        methods: {
		            fun01: function () {
		                this.user = {
		                    username: 'ls',
		                    password: '666666'
		                }
		            }
		        }
		    });
		</script>

	</body>
</html>



<!--
computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
-->